<template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item
        v-for="(item, index) in breadcrumbList"
        :key="item.path"
      >
        <!-- 不可跳转路由（最后一项 || redirect === "noRedirect"） -->
        <span
          v-if="
            index === breadcrumbList.length - 1 ||
            item?.redirect === 'noRedirect'
          "
          >{{ item.meta.title }}</span
        >
        <!-- 可跳转路由 -->
        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>
// 详见https://github.com/pillarjs/path-to-regexp
import * as pathToRegexp from "path-to-regexp";

export default {
  data() {
    return {
      breadcrumbList: null, // 面包屑列表
    };
  },
  watch: {
    /**
     * 监听路由变化
     */
    $route: {
      handler(route) {
        // 重定向中介页面，无需处理
        if (route.path.startsWith("/redirect/")) {
          return;
        }
        this.getBreadcrumb();
      },
      immediate: true,
    },
  },
  methods: {
    /**
     * 获取面包屑
     */
    getBreadcrumb() {
      // 渲染规则
      // meta对象中存在title属性 && meta对象中的breadcrumb !== false
      this.breadcrumbList = this.$route.matched?.filter(
        (item) => item?.meta?.title && item?.meta?.breadcrumb !== false
      );
    },
    /**
     * 编译路径
     */
    pathCompile(path) {
      const { params } = this.$route;
      // 返回一个将参数转换为有效路径的函数，动态路由极其有用（例如：/user/:id等）
      const toPath = pathToRegexp.compile(path);
      return toPath(params);
    },
    /**
     * 点击链接
     */
    handleLink(item) {
      const { redirect, path } = item;
      console.log(redirect);
      /**
       * 有重定向的直接跳转到重定向地址
       */
      if (redirect) {
        this.$router.push(redirect);
        return;
      }
      console.log(this.pathCompile(path));
      this.$router.push(this.pathCompile(path));
    },
  },
};
</script>

<style lang="less" scoped>
.app-breadcrumb {
}
</style>
